<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>alignItems属性</title>
  <style>
    .dstart,.dend,.dcenter,.dstretch{
      width: 100%;
      height: 150px;
      background-color: orange;
      display: flex;
      align-items: flex-start;
    }
    .dend {
      align-items: flex-end;
    }
    .dcenter {
      align-items: center;
    }
    .dstretch {
      align-items: stretch;
    }
    .d1,.d2,.d3 {
      width: 200px;
      /*height: 100px;*/
      background-color: lightblue;
      margin-bottom: 5px;
      margin-right: 5px;

    }
  </style>
</head>
<body>
  <h1>1. align-items属性：代表盒子在交叉轴上的对齐方式 <hr size="3" color="red"></h1>
  <h3>1.1 align-items: flex-start(交叉轴开始方向【上面】)</h3>
  <div class="dstart">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
  </div>
  <h3>1.2 align-items: flex-end(交叉轴开始方向【下面】)</h3>
  <div class="dend">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
  </div>
  <h3>1.3 align-items: center(交叉轴居中对齐)</h3>
  <div class="dcenter">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
  </div>
  <h3>1.4 align-items: stretch(拉伸整个交叉轴,默认值)</h3>
  <div class="dstretch">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
  </div>
</body>
</html>
